Опис HTML тега < canvas >:

Тег <canvas></canvas> використовується в Html5 для створення області, в якій  можна малювати різні об'єкти,  виводити і трансформувати  зображення, змінювати  їх властивості,  створювати  анімацію, ігри,   малюнки . Для того, щоб створити елемент за допомогою canvas, потрібно задати ідентифікатор ID . Також задати ширину width  і висоту height . Canvas є всього лише контейнером для графіки. Для того, щоб проводити різні дії, необхідно включити сценарії JS.

Синтаксис HTML тега < canvas >:

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#0000FF';

ctx.fillRect(50,100,100,200);

</script>

Результатом  виконання даного коду буде полотно розміром 300*300 із зображеним на нім  прямокутником 100px * 200px синього кольору з відступом зліва 50 і зверху 100 .

Колір прямокутника задається в стрічці  ctx.fillStyle='#0000FF';

Позиціонування  Х, позиціонування У, ширина, висота,  задається в строчці  ctx.fillRect(50,100,100,300);

Для зрушення вліво-управо міняємо перше число

Для зрушення вгору-вниз  міняємо друге число

Для позначення ширини фігури міняємо третє число 

Для позначення висоти фігури міняємо четверте число

Параметрі HTML тега < canvas >:

width - вказує ширину полотна

height -  вказує висоту полотна